<template>
  <div class="notice_box">
    <!-- <img src="../../assets/image/bg3.png" alt="" /> -->
    <div id="slogan">
      <p class="tag">环保活动查询</p>
      <p>参与垃圾分类，保护地球家园，共创美好世界</p>
    </div>
    <el-tabs v-model="activeName" class="notice_box_list">
      <el-tab-pane label="" name="first" style="display: flex">
        <!-- v-for="(item,index) in noticeList" :key="`notice_${index}`" -->
        <!-- <div
          class="list_item"
          v-for="item in noticeList"
          :key="`notice_${item.id}`"
        >
          <div class="time">
            <div>{{ item.month }}/{{ item.day }}</div>
            <p>{{ item.year }}</p>
          </div>
          <div class="text">
            <p>{{ item.title }}</p>
            <p>{{ item.content }}</p>
          </div>
        </div> -->
        <div style="display: flex">
          <div class="notice_box">
            <div class="title">
              <div>指导</div>
              <div @click="changeActiveName('second', 1)">更多</div>
            </div>
            <div class="msg_box">
              <div @click="openDetail(item)"
                v-for="item in guidanceList"
                :key="`guidance_${item.id}`"
                class="msg"
              >
                <div>{{ item.title }}</div>
                <div>{{ item.month }}-{{ item.day }}</div>
              </div>
            </div>
          </div>
          <div class="notice_box">
            <div class="title">
              <div>咨询</div>
              <div @click="changeActiveName('second', 2)">更多</div>
            </div>
            <div class="msg_box">
              <div
                v-for="item in noticeList"
                :key="`guidance_${item.id}`"
                class="msg" @click="openDetail(item)"
              >
                <div>{{ item.title }}</div>
                <div>{{ item.month }}-{{ item.day }}</div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="" name="second">
        <div class="notice_box big">
          <div class="title">
            <div>{{query.eventsType == 2 ? '咨询' : '指导'}}</div>
            <div @click="changeActiveName('first')">返回</div>
          </div>
          <div class="msg_box">
            <div v-for="item in list" :key="`guidance_${item.id}`" class="msg" @click="openDetail(item)">
              <div>{{ item.title }}</div>
              <div>{{ item.month }}-{{ item.day }}</div>
            </div>
          </div>
        </div>
        <div class="pagination">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="query.current"
            :page-size="query.size"
            layout="total, prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      title="详情"
      :visible.sync="centerDialogVisible"
      width="50%"
      center
    >
      <div class="detail">
        <p>{{detailInfo.title}}</p>
        <div v-html="detailInfo.content"></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { articlePage } from "@/api/info";
export default {
  data() {
    return {
      activeName: "first",
      noticeList: [],
      query: {
        size: 10,
        current: 1,
        input: {
          eventsType: 1,
        },
      },
      total: 0,
      guidanceList: [],
      list: [],
      centerDialogVisible:false,
      detailInfo: {}
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.queryList(
        {
          size: 5,
          current: 1,
          input: {
            eventsType: 1,
          },
        },
        1
      );
      this.queryList(
        {
          size: 5,
          current: 1,
          input: {
            eventsType: 2,
          },
        },
        2
      );
    },
    handleCurrentChange(val) {
      this.query.current = val;
      this.queryList(this.query);
    },
    changeActiveName(name, eventsType) {
      this.activeName = name;
      this.query.eventsType = eventsType
      if (name == "first") {
        this.init();
      } else {
        this.list = [];
        this.queryList({
          ...this.query,
          input: {
            eventsType,
          },
        });
      }
    },
    setData(res, eventsType) {
      let data = res.data.records || [];
      data = data.map((item) => {
        let str = item.updateTime?.split(" ")[0];
        let time = str.split("-");
        item.year = time[0];
        item.month = time[1];
        item.day = time[2];
        return item;
      });
      if (eventsType == 1) {
        this.guidanceList = data;
      } else if (eventsType == 2) {
        this.noticeList = data;
      } else {
        this.total = res.data.total;
        this.list = data;
      }
    },
    queryList(data, type) {
      articlePage(data).then((res) => {
        this.setData(res, type);
      });
    },
    openDetail(item) {
      this.detailInfo = item
      this.centerDialogVisible = true
    },
  },
};
</script>
<style lang="scss" scoped>
.notice_box {
  &_list {
    width: 80vw;
    margin: 15px auto;
    .list_item {
      display: flex;
      border-bottom: 1px dashed #cbc9c9;
      padding-bottom: 15px;
      margin-bottom: 30px;
      cursor: pointer;
      .time {
        text-align: center;
        margin-right: 15px;
        div {
          font-size: 2em;
          font-weight: 800;
        }
      }
      .text {
        flex: 1;
        p:last-child {
          width: 70vw;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          color: #666666;
        }
      }
    }
    .notice_box {
      width: 40vw;
      padding: 15px;
      .title {
        display: flex;
        justify-content: space-between;
        font-size: 20px;
        line-height: 30px;
        font-weight: bold;
        margin-bottom: 15px;
        div:last-child {
          color: blue;
          cursor: pointer;
        }
      }

      .msg {
        color: #666666;
        margin-bottom: 15px;
        display: flex;
        cursor: pointer;
        justify-content: space-between;
        div:first-child {
          max-width: 30vw;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    .big {
      width: 80vw;
      .msg {
        div:first-child {
          max-width: 70vw;
        }
      }
    }
  }
  .detail{
    width: 100%;
    height: 50vh;
    overflow: hidden;
    overflow-y: auto;
    p{
      font-size: 24px;
      font-weight: bold;
      text-align: center;
    }
    div{
      text-indent: 2em;
    }
  }
}
</style>
